<template>
    <el-container>
        <el-header>路由及菜单设置工具</el-header>
        <el-main>
            <div style="width: 1100px">
                <div style="height: 80px">

                </div>

                <div style="width: 1100px;background-color: #a7ffef;height: auto;float: left;margin-left: 20px">

                    <ul>
                        <li v-for="(m1,index) in menuList1" :key="index">
                            <h1 style="color: #ff8932;">
                                <a @click="goEditMenu(m1)">{{m1.mname}}</a>
                                <i @click="goAddMenu(m1)" style="color: #000000;"
                                   class="el-icon-circle-plus-outline"></i>
                            </h1>

                            <div>
                                <div v-for="(m2,index) in menuList2" :key="index">

                                    <span v-if="m2.pid==m1.mid">
                                        <h3 style="color: #ff3ef9;">
                                            <a @click="goEditMenu(m2)">{{m2.mname}} </a>
                                            <i @click="goAddMenu(m2)" style="color: #000000;"
                                               class="el-icon-circle-plus-outline"></i>
                                        </h3>
                                        <span>
                                            <span v-for="(m3,index) in menuList3" :key="index">
                                                <span v-if="m3.pid==m2.mid">
                                                    <span style="color: #ff1712; "><a @click="goEditMenu(m3)">{{m3.mname}}</a></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                </span>
                                            </span>
                                        </span>
                                    </span>
                                    <span v-else></span>
                                </div>
                            </div>
                        </li>
                    </ul>

                </div>

                <el-dialog id="mark" title="添加子菜单" :visible.sync="dialog1" width="540px" :show-close="true" center>
                    <el-form style="border: 1px solid #e0e0e0;margin-top: 20px" :model="ruleForm">
                        <el-form-item label="父级菜单" prop="addName" label-width="80px">
                            <el-input disabled v-model="ruleForm.pname"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单名称" prop="addName" label-width="80px">
                            <el-input v-model="ruleForm.mname"></el-input>
                        </el-form-item>

                        <el-form-item label="路由path" prop="addIdcord" label-width="80px">
                            <el-input v-model="ruleForm.resuri" maxlength="18"></el-input>
                        </el-form-item>

                        <el-button type="primary" @click="dialog1=false">取消</el-button>&nbsp;
                        <el-button type="danger" @click="addMenu()">添加</el-button>&nbsp;
                    </el-form>


                </el-dialog>

                <el-dialog id="mark" title="编辑菜单" :visible.sync="dialog2" width="540px" :show-close="true" center>
                    <el-form style="border: 1px solid #e0e0e0;margin-top: 20px" :model="ruleEditForm">
                        <el-form-item label="菜单id" prop="addName" label-width="80px">
                            <el-input disabled v-model="ruleEditForm.mid"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单名称" prop="addName" label-width="80px">
                            <el-input v-model="ruleEditForm.mname"></el-input>
                        </el-form-item>

                        <el-form-item v-if="ruleEditForm.mlevel==3" label="路由path" prop="addIdcord" label-width="80px">
                            <el-input v-model="ruleEditForm.resuri" maxlength="100"></el-input>
                        </el-form-item>

                        <el-button type="primary" @click="dialog2=false">取消</el-button>&nbsp;
                        <el-button type="danger" @click="editMenu()">确定</el-button>&nbsp;
                    </el-form>


                </el-dialog>

            </div>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: 'menu',
        data() {
            return {
                dialog1: false,
                dialog2: false,
                leagueList: {},
                name: "-",
                leagueName: "-",
                idcord: "-",
                id: "",

                ruleForm: {
                    mname: "",
                    resuri: "",
                    pid: "",
                    pname: ""
                },

                ruleEditForm: {
                    mid: "",
                    mname: "",
                    resuri: "",
                    mlevel: "",

                },

                menuList: [],
                menuList1: [],
                menuList2: [],
                menuList3: [],

                searchLeague: "",
                searchName: "",
                searchIdcord: "",
            }
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val)
            },
        },
        created() {
            // this.getUserList()
            this.getMenuList()
        },
        methods: {
            setSelectUserInfo(name, leagueName, idcord, id) {
                this.name = name
                this.leagueName = leagueName
                this.idcord = idcord
                this.id = id
            },


            getMenuList() {

                this.PF('/menu/selectMenu', {}, {}).then((response) => {

                    if (response.data.retCode == 1000) {
                        let res = response.data.results
                        let menuList = res

                        this.menuList1 = []
                        this.menuList2 = []
                        this.menuList3 = []

                        menuList.forEach((v, i, a) => {
                            if (v.mlevel == 1) {
                                this.menuList1.push(v)
                            } else if (v.mlevel == 2) {
                                this.menuList2.push(v)
                            } else if (v.mlevel == 3) {
                                this.menuList3.push(v)
                            }
                        })

                        console.log(this.menuList1)
                        console.log(this.menuList2)
                        console.log(this.menuList3)

                        this.menuList = res
                        console.log(this.menuList)
                    } else {
                        this.$message({
                            showClose: true,
                            message: response.data.retMsg,
                            type: "error"
                        })
                    }


                }).catch(function (error) {
                    console.log(error)
                    // this.$elementMessage('网络繁忙，请稍后再试', "error")
                })
            },

            goAddMenu(menu) {
                this.dialog1 = true

                this.ruleForm.pid = menu.mid
                this.ruleForm.pname = menu.mname
            },

            goEditMenu(menu) {
                this.dialog2 = true
                this.ruleEditForm.mid = menu.mid
                this.ruleEditForm.mname = menu.mname

                if (this.ruleEditForm.mlevel == 3) {
                    this.ruleEditForm.resuri = menu.resuri
                }
                this.ruleEditForm.mlevel = menu.mlevel
                this.ruleEditForm.resid = menu.resid
            },

            addMenu() {
                if (this.ruleForm.mname.length == 0) {
                    this.$message({
                        showClose: true,
                        message: "菜单名称不能为空",
                        type: "error"
                    })
                    return
                }
                if (this.ruleForm.resuri.length == 0) {
                    this.$message({
                        showClose: true,
                        message: "路由path未填写",
                        type: "error"
                    })
                    return
                }
                if (this.ruleForm.pid.length == 0) {
                    this.$message({
                        showClose: true,
                        message: "父级id 尚未明确",
                        type: "error"
                    })
                    return
                }
                let param = {
                    ...this.ruleForm
                }
                this.dialog1 = false
                this.PF('menu/addMenu', param, {}).then((response) => {

                    if (response.data.retCode == 1000) {
                        this.$message({
                            showClose: true,
                            message: "添加成功",
                            type: "success"
                        })
                        this.ruleForm.mname = ''
                        this.ruleForm.resuri = ''
                        this.ruleForm.pid = ''
                        this.ruleForm.pname = ''
                        this.getMenuList()
                    } else {
                        this.$message({
                            showClose: true,
                            message: "添加失败，失败原因：" + response.data.retMsg,
                            type: "error"
                        })
                    }

                }).catch(function (error) {
                    console.log(error)
                    // this.$elementMessage('网络繁忙，请稍后再试', "error")
                })
            },

            editMenu() {
                if (this.ruleEditForm.mname.length == 0) {
                    this.$message({
                        showClose: true,
                        message: "菜单名称不能为空",
                        type: "error"
                    })
                    return
                }
                // if (this.ruleEditForm.resuri.length == 0) {
                //     this.$message({
                //         showClose: true,
                //         message: "路由path未填写",
                //         type: "error"
                //     })
                //     return
                // }
                if (this.ruleEditForm.mid.length == 0) {
                    this.$message({
                        showClose: true,
                        message: "要修改的菜单 尚未明确",
                        type: "error"
                    })
                    return
                }
                let param = {
                    ...this.ruleEditForm
                }
                this.dialog2 = false
                this.PF('menu/editMenu', param, {}).then((response) => {

                    if (response.data.retCode == 1000) {
                        this.$message({
                            showClose: true,
                            message: "修改成功",
                            type: "success"
                        })
                        this.ruleEditForm.mid = ''
                        this.ruleEditForm.mname = ''
                        this.ruleEditForm.resuri = ''
                        this.ruleEditForm.mlevel = ''
                        this.getMenuList()
                    } else {
                        this.$message({
                            showClose: true,
                            message: "修改失败，失败原因：" + response.data.retMsg,
                            type: "error"
                        })
                    }

                }).catch(function (error) {
                    console.log(error)
                    // this.$elementMessage('网络繁忙，请稍后再试', "error")
                })
            },

            deleteUser(idcord) {
                let param = new FormData();
                param.append("idcord", idcord)

                this.PF('/personSqlLite/delUser', param, {}).then((response) => {

                    if (response.data.retCode == 1000) {

                        this.$message({
                            showClose: true,
                            message: "删除成功",
                            type: "success"
                        })
                        this.name = "-"
                        this.leagueName = "-"
                        this.idcord = "-"
                        this.getUserList()
                    } else {
                        this.$message({
                            showClose: true,
                            message: "删除失败，失败原因：" + response.data.retMsg,
                            type: "error"
                        })
                    }

                }).catch(function (error) {
                    console.log(error)
                    // this.$elementMessage('网络繁忙，请稍后再试', "error")
                })
            },
        }
    }
</script>

<style scoped>
    @import url("//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css");

    .leftLabel {
        float: left;
        display: block;
    }

    a:hover {
        color: #2526ff
    }

    .rightInput {
        float: left;
        display: block;
    }

    .el-header {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        height: 80px !important;
        line-height: 80px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        height: 100% !important;
        line-height: 100% !important;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .ztree {
        margin: 0;
        padding: 5px;
        color: #333;
    }

    .aa:hover {
        color: #405aff;
    }

    .aa {
        color: red;
        text-decoration: none;
        font-weight: 600;
    }

</style>
